﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    @Html.Style("~/scripts/layuiadmin/layui/css/layui.css")
    @Html.Style("~/scripts/layuiadmin/style/admin.css")
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="query-filter">
                <div class="layui-form-item">
                    <div class="layui-inline" style="display:none;">
                        <div class="layui-input-inline">
                            <select id="enable">
                                <option value="-1">全部用户</option>
                                <option value="1">可用</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select id="expire">
                                <option value="-1">所有</option>
                                <option value="2">已过期</option>
                                <option value="3">未过期</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input searchVal" id="txtUserName" placeholder="请输入用户名" />
                        </div>
                        <a class="layui-btn" id="btnSearchUser" data-type="reload">搜索</a>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn" id="btnAddUser">新增</a>
                    </div>
                    <div class="layui-inline">
                        <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量刪除</a>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table id="userList" lay-filter="userList"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="userListBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">刪除</a>
    </script>
    <script type="text/html" id="userScriptDialog">
        <div class="layui-form" style="margin:10px;">
            <table id="userScriptList" lay-filter="userScriptList"></table>
        </div>
    </script>
    <script id="addUserDialog" type="text/html">
        <div class="layui-form" style="margin:20px;" lay-filter="user-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" id="userName" class="layui-input" lay-verify="required" placeholder="用户名" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" value="123456abc" class="layui-input" lay-verify="required" placeholder="默认密码 123456abc" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">设备数量</label>
                <div class="layui-input-block">
                    <input type="text" name="maxCount" class="layui-input" lay-verify="required" placeholder="允许的最大设备数量" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">独占添加</label>
                <div class="layui-input-block">
                    <select name="onlyDataMode">
                        <option value="0">禁止页面添加</option>
                        <option value="1">朋友圈数据</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">独占数据</label>
                <div class="layui-input-block">
                    <input type="text" name="onlyData" class="layui-input" lay-verify="required" placeholder="允许的最大独占数据条数" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">共享添加</label>
                <div class="layui-input-block">
                    <select name="shareDataMode">
                        <option value="0">禁止页面添加</option>
                        <option value="1">朋友圈数据</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">共享数据</label>
                <div class="layui-input-block">
                    <input type="text" name="shareData" class="layui-input" lay-verify="required" placeholder="允许的最大共享数据条数" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">过期时间</label>
                <div class="layui-input-block">
                    <input type="text" name="expireDate" id="expireTime" class="layui-input" lay-verify="required" placeholder="过期时间 yyyy-MM-dd" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input type="text" name="code" class="layui-input" lay-verify="required" placeholder="设备连接时用" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <input type="text" name="remark" class="layui-input" lay-verify="required" placeholder="备注" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">可用指令</label>
                <div class="layui-input-block">
                    @foreach (var item in ViewBag.Commands)
                    {
                        <input type="checkbox" name="command" lay-skin="primary" title="@item.Name" value="@item.Id">
                    }
                </div>
            </div>
        </div>
    </script>
    @Html.Script("~/scripts/layuiadmin/layui/layui.js")
    @Html.Script("~/scripts/clipboard.min.js")
    <script>
        var $ = layui.$;
        var groups = JSON.parse('@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Groups))');

        layui.config({
            base: '../../scripts/layuiadmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table'], function () {
            var table = layui.table,
                laydate = layui.laydate,
                form = layui.form;
            initUser();

            $("#btnSearchUser").on("click", function () {
                table.reload("userListTable", {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    },
                    where: {
                        userState: $('#enable').val(),
                        expire: $('#expire').val(),
                        userName: $('#txtUserName').val()
                    }
                })
            });

            //添加
            function addUser(userInfo) {
                var action = userInfo ? 'edit' : 'add';
                layui.layer.open({
                    title: userInfo ? '修改用户': "新增用户",
                    type: 1,
                    btn: ['确定', '取消'],
                    area: '540px',
                    offset: '100px',
                    content: $('#addUserDialog').html(),
                    success: function (layero, index) {
                        if (userInfo) {
                            userInfo.password = '';
                            form.val('user-form', userInfo);
                            $('#userName').attr('readonly', 'readonly');
                            laydate.render({ elem: '#expireTime', value: userInfo.expireDate.split(' ')[0] });
                            var commands = $('input[name="command"]');

                            for (var i = 0; i < commands.length; i++) {
                                for (var j = 0; j < userInfo.commands.length; j++) {
                                    if (userInfo.commands[j].id == commands[i].value) {
                                        $(commands[i]).prop('checked', true);
                                    }
                                }
                            }
                        } else {
                            laydate.render({ elem: '#expireTime' });
                        }

                        form.render();

                    },
                    yes: function (index, layero) {
                        var user = form.val('user-form');
                        var commands = $('input[name="command"]:checked');
                        var commandIds = [];

                        for (var i = 0; i < commands.length; i++) {
                            commandIds.push(parseInt(commands[i].value));
                        }

                        user.command = undefined;
                        user.commandIds = commandIds;

                        if (user.userName.length < 1 && user.userName.length > 16) {
                            layer.msg('用户名 1-16 位之间');
                            return;
                        }

                        if (user.password.length>0 && (user.password.length < 6 || user.password.length > 12)) {
                            layer.msg('密码 6-12 位之间');
                            return;
                        }

                        if (user.expireDate.length < 1) {
                            layer.msg('请输入到期时间');
                            return;
                        }

                        if (user.maxCount.length < 1) {
                            layer.msg('请输入最大设备数量');
                            return;
                        }

                        if (user.code.length < 1) {
                            layer.msg('请输入设备验证码');
                            return;
                        }

                        user.action = action;

                        $.post('/admin/user/edit', user, function (data) {
                            if (data.code == 1) {
                                layer.close(index);
                                table.reload('userListTable');
                            } else {
                                layer.msg(data.msg);
                            }
                        });
                    }
                });
            }

            $("#btnAddUser").click(function () {
                addUser();
            })

            //批量删除
            $(".delAll_btn").click(function () {
                var checkStatus = table.checkStatus('userListTable'),
                    data = checkStatus.data,
                    keys = [];

                if (data.length > 0) {
                    for (var i in data) {
                        keys.push(data[i].userName);
                    }

                    layer.confirm('确定删除？', { icon: 3, title: '提示信息', offset: '100px' }, function (index) {
                        $.post('/admin/user/delete-users', {
                            ids: keys
                        }, function (data) {
                            if (data.code == 1) {
                                table.reload('userListTable');
                                layer.close(index);
                            } else {
                                layer.msg(data.msg);
                            }
                        });
                    })
                } else {
                    layer.msg("请选择要删除的用户");
                }
            })

            //列表操作
            table.on('tool(userList)', function (obj) {
                var layEvent = obj.event,
                    data = obj.data;

                if (layEvent === 'del') { //删除
                    layer.confirm('确定删除？', { icon: 3, title: '提示信息', offset: '100px' }, function (index) {
                        $.post('/admin/user/delete', {
                            userName: data.userName
                        }, function (data) {
                            if (data.code == 1) {
                                table.reload('userListTable');
                                layer.close(index);
                            } else {
                                layer.msg(data.msg);
                            }
                        })
                    });
                } else if (layEvent === 'edit') {
                    addUser(data);
                }
            });

            function initUser() {
                table.render({
                    elem: '#userList',
                    url: '/admin/user/list',
                    cellMinWidth: 95,
                    method: 'post',
                    page: true,
                    limit: 100,
                    limits: [10, 15, 20, 30, 50, 100],
                    id: "userListTable",
                    where: {
                        userState: $('#enable').val(),
                        expire: $('#expire').val(),
                        userName: $('#txtUserName').val()
                    },
                    request: {
                        pageName: 'pageIndex' //页码的参数名称，默认：page
                        , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    response: {
                        statusName: 'code' //规定数据状态的字段名称，默认：code
                        , statusCode: 1 //规定成功的状态码，默认：0
                        , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                        , countName: 'count' //规定数据总数的字段名称，默认：count
                        , dataName: 'data' //规定数据列表的字段名称，默认：data
                    },
                    cols: [[
                        { type: "checkbox", fixed: "left", width: 60 },
                        { field: 'userName', title: '用户名', align: "center", width: 150 },
                        { field: 'code', title: '验证码', align: "center", width: 130 },
                        { field: 'maxCount', title: '设备数', align: "center", width: 130 },
                        { field: 'onlyData', title: '独占数据', align: "center", width: 130 },
                        { field: 'shareData', title: '共享数据', align: "center", width: 130 },
                        { field: 'lastLoginIp', title: '上次登录IP', align: "center", width: 180 },
                        {
                            field: 'lastLoginTime', title: '上次登录时间', align: 'center', width: 180, templet: function (d) {
                                if (d.lastLoginTime != d.addTime) {
                                    return '<span>' + d.lastLoginTime + '</span>';
                                } else {
                                    return '<span class="layui-blue">未登录</span>';
                                }
                            }
                        },
                        {
                            field: 'expireDate', title: '过期时间', align: 'center', width: 180, templet: function (d) {
                                if (d.isExpired) {
                                    return '<span style="color:red;">' + d.expireDate + '</span>';
                                } else {
                                    return '<span style="color:#1E9FFF;">' + d.expireDate + '</span>';
                                }
                            }
                        },
                        { field: 'addTime', title: '添加时间', align: 'center', width: 180 },
                        { field: 'remark', title: '备注', align: 'left' },
                        { title: '操作', width: 120, templet: '#userListBar', fixed: "right", align: "center", width: 150 }
                    ]]
                });
            }
        });
    </script>
</body>
</html>